<!-- 菜单水平布局 -->
<template>
  <Header :defaultIndex="topIndex" :topMenus="topMenus" @selectTopMenu="selectTopMenu" />
  <keep-alive>
    <BackContent :menus="subMenus" :currentMenu2="currentMenu2" @selectSubMenu="selectMenu" />
  </keep-alive>
</template>

<script lang="ts" setup>
import type { RouteRecordRaw } from 'vue-router'
import router, { isEncryptRouter } from '@/router'
import Header from 'components/back/common/Header.vue'
import BackContent from 'components/back/common/BackContent.vue'
import useBasicStore from '@/store/basic'
import * as helpers from '@/utils/helpers'

const store = useBasicStore()

const topMenus = computed(() => {
  return store.menus[0]?.children || []
})

let topIndex = ref(-1)
let currentMenu2 = ref<RouteRecordRaw>()
let subMenus = ref<RouteRecordRaw[]>(topMenus.value[0].children || [])
let currentPath = ref<string>('')

/**
 * 函数防抖，控制?s内点击路由限制
 * 可以直接使用lodash的debounce
 */
const selectMenuHandle = helpers.debounce((menu: RouteRecordRaw, parent: RouteRecordRaw | undefined) => {
  router.push({
    path: menu.path
  })
  currentMenu2.value = parent || menu
}, 300)


const selectMenu = (menu: RouteRecordRaw, parent: RouteRecordRaw | undefined) => {
  selectMenuHandle(menu, parent)
}

const selectTopMenu = (index: number) => {
  topIndex.value = index
  currentPath.value = ''
}

const filterFirstOrDefault = (origin: RouteRecordRaw[] | any[], defaultPath: string | any): Array<RouteRecordRaw> => {
  let t: RouteRecordRaw = defaultPath ? origin.find(t => t.path === defaultPath || defaultPath.includes(t.path)) || origin[0] : origin[0]
  return t?.children?.length ? [t, ...filterFirstOrDefault(t.children, defaultPath)].reverse() : [t]
}

const filterFirstOrDefaultNew = (origin: RouteRecordRaw[], defaultPath: string): Array<RouteRecordRaw> => {
  // 倒叙 未匹配自然返回第一个
  let p: RouteRecordRaw = origin[0]
  let c: RouteRecordRaw | undefined
  for (let i = origin.length - 1; i >= 0; i--) {
    p = origin[i]
    if (isEncryptRouter) {
      if (p.alias === defaultPath) break
    } else {
      if (p.path === defaultPath) break
    }
    let f = false
    if (p.children && p.children.length) {
      let children = p.children
      for (let j = children.length - 1; j >= 0; j--) {
        c = children[j]
        if (isEncryptRouter) {
          if (c.alias === defaultPath) {
            f = true
            break
          }
        } else {
          if (c.path === defaultPath) {
            f = true
            break
          }
        }
      }
    }
    if (f) break
  }
  return c ? [c, p] : [p]
}

watch(() => topIndex.value, (n, o) => {
  if (n !== o) {
    let subs: RouteRecordRaw[] = topMenus.value[n].children || []
    subMenus.value = subs
    if (subs && subs.length) {
      let f = filterFirstOrDefaultNew(subs, currentPath.value)
      if (f.length) {
        selectMenu(f[0], f[1] || f[0] || undefined)
      }
    } else {
      selectMenu(topMenus.value[n], undefined)
    }
  }
}, { immediate: false })



watch(() => router.currentRoute.value, (n, o) => {
  currentPath.value = n.path
  if (currentPath.value === '/back') {
    topIndex.value = 0
  } else {
    topMenus.value.forEach((t: RouteRecordRaw, i: number) => {
      if (n && n.matched.length) {
        if (n.matched.find(m => m.path === t.path)) {
          topIndex.value = i
        }
      }
    })
  }
}, { immediate: true })

</script>
